<template>
	<view class="container">
		<!-- 地址选择 -->
		<view class="address-payment-content">
			<view class="left-content">
				<view class="address-box">北京通州区永顺镇鹿苑家园16号楼 5单元 551北京通州区永顺镇鹿苑家园16号楼 5单元 551</view>
				<view>李兴达 18612207086</view>
				<view style="display: flex;" @click="selectClick">选择优先发货地点：北京 <u-icon name='arrow-down'></u-icon></view>
			</view>
			<view class="right-content">
				<u-icon name='arrow-right'></u-icon>
			</view>
			<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		</view>

		<!-- 商品内容 -->
		<view class="shop-payment-content">
			<view class="shopping-cart-item">
				<uni-data-checkbox v-model="value">
				</uni-data-checkbox>
				<view class="img-box">
					<img src="https://cdn.uviewui.com/uview/swiper/swiper1.png" alt="">
				</view>
				<view>
					<view style="font-size: 32rpx;font-weight: 600;">大麦植发洗发水</view>
					<view style="font-size: 28rpx;color: #999;
											overflow: hidden;
											text-overflow: ellipsis;
											display: -webkit-box;
											-webkit-line-clamp: 2;
											-webkit-box-orient: vertical;">
						大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水</view>
					<view style="font-size: 28rpx;color: #dd2a2a;display: flex;justify-content: space-between;">
						<view>320 $</view>
						<view><u-number-box size='20rpx' v-model="value"></u-number-box></view>
					</view>
				</view>
			</view>

		</view>

		<!-- 支付提交 -->
		<view class="footer-bottom-box">
			<view>
				<view style="color: red;font-size:32rpx;   word-break: break-all;margin-right: 20rpx;">
					合计：213123
				</view>
			</view>
			<view>
				<view style="display: flex;justify-content: space-between;align-items: center;">

					<view style="width: 300rpx;">
						<u-button type="error" shape='circle' text="确定"></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: false,
				columns: [
					['中国', '美国', '日本']
				]
			};
		},
		methods: {
			selectClick() {
				this.show = true
			},
			confirm() {
				this.show = false
			},
			cancel() {
				this.show = false
			}
		},
		created() {},
		mounted() {}
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>